<template>
<div>
<el-menu
  :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#001529">
  <el-menu-item >爱宠邦管理系统</el-menu-item>
    <el-menu-item > 
      <div class="user">
                <span v-if="isLoading">正在登录中....</span>
                
                <template v-else-if="user">
                 <router-link :to="{name:'Personal'}">
                   {{user.tusername}}
                 </router-link>
                 
                  <a href="" @click.prevent="handleLoginOut()">退出登录</a>
                </template>
                <template v-else>
                    <router-link :to="{name:'Login'}">登录</router-link>
                    <router-link :to="{name:'Reg'}">注册</router-link>
                </template>
                
            </div>
  </el-menu-item>
  
</el-menu>
</div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
  components: { 
    
  },
  computed:{
    ...mapState("userStore",["user","isLoading"])
  },
    data() {
      return {
        activeIndex: '1'
      };
    },
    methods: {
      handleLoginOut(){
      this.$store.dispatch("userStore/loginOut");   
    },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    }
  }
</script>
  


<style scoped>
#app .el-menu--horizontal li:nth-child(2){
    float: right;
}


</style>